<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加员工</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="${ctx}/public/css/font.css">
    <link rel="stylesheet" href="${ctx}/public/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/public/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${ctx}/public/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-body">
    <form class="layui-form" id="deptForm">
        <input type="hidden" name="id" id="id" value="${employee.id}">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username" required="" lay-verify="username"
                       autocomplete="off" class="layui-input" value="${employee.username}">
            </div>

        </div>
        <div class="layui-form-item">
            <label for="password" class="layui-form-label">
                <span class="x-red">*</span>密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="password" name="password" required="" lay-verify="password"
                       autocomplete="off" class="layui-input" value="${employee.password }">
            </div>

        </div>
        <div class="layui-form-item">
            <label for="cardId" class="layui-form-label">
                <span class="x-red">*</span>身份证号码
            </label>
            <div class="layui-input-inline">
                <input type="text" id="cardId" name="cardId" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" value="${employee.cardId }">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="sex" class="layui-form-label">
                <span class="x-red">*</span>性别
            </label>
            <div class="layui-input-inline">
                <input type="text" id="sex" name="sex" placeholder="男性请输入1，女性请输入2" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" value="${employee.sex}">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="education" class="layui-form-label">
                <span class="x-red">*</span>学历
            </label>
            <div class="layui-input-inline">
                <input type="text" id="education" name="education" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" value="${employee.education }">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="email" class="layui-form-label">
                <span class="x-red">*</span>邮箱
            </label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" value="${employee.email}">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red">*</span>手机
            </label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" value="${employee.phone}">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="address" class="layui-form-label">
                <span class="x-red">*</span>联系地址
            </label>
            <div class="layui-input-inline">
                <input type="text" id="address" name="address" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" value="${employee.address}">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="jobId" class="layui-form-label">
                <span class="x-red">*</span>职位
            </label>
            <div class="layui-input-inline">
                <select id="jobId" name="jobId" class="valid">
                    <c:forEach items="${requestScope.job_list}" var="line" varStatus="stat">
                        <option value="${line.id}"
                                <c:if test="${employee.jobId == line.id }">selected</c:if>>${line.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="deptId" class="layui-form-label">
                <span class="x-red">*</span>部门
            </label>
            <div class="layui-input-inline">
                <select id="deptId" name="deptId" class="valid">
                    <c:forEach items="${requestScope.dept_list}" var="line" varStatus="stat">
                        <option value="${line.id}"
                                <c:if test="${employee.deptId == line.id}">selected</c:if>>${line.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <input type="submit" value=" 提交" class="layui-btn" lay-filter="add" lay-submit=""/>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;

        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            }
            , password: [/(.+){6,12}$/, '密码必须6到12位']
            , repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function (data) {
            console.log(data);
            $.ajax({
                type: 'post',
                async: false,
                url: "${ctx}/employee/add",
                data: $("#deptForm").serialize(),
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        layer.alert("增加成功", {icon: 6}, function () {
                            window.location.replace("${ctx}/employee/list");
                        });
                    } else {
                        layer.msg('增加失败！', {
                            icon: 2,
                            time: 1000,
                        })
                    }
                },
                error: function () {
                    layer.msg('增加失败！', {
                        icon: 2,
                        time: 1000,
                    })
                }
            });
            //发异步，把数据提交给php
            return false;
        });


    });
</script>


<%--<script>--%>
<%--    layui.use(['form', 'layer'], function () {--%>
<%--        let $ = layui.jquery;--%>
<%--        let form = layui.form;--%>
<%--        let layer = layui.layer;--%>

<%--        //自定义验证规则--%>
<%--        form.verify({--%>
<%--            username: function (value) {--%>
<%--                if (value.length < 5) {--%>
<%--                    return '昵称至少得5个字符啊';--%>
<%--                }--%>
<%--            }--%>
<%--            , pass: [/(.+){6,12}$/, '密码必须6到12位']--%>
<%--            , repass: function (value) {--%>
<%--                if ($('#L_pass').val() != $('#L_repass').val()) {--%>
<%--                    return '两次密码不一致';--%>
<%--                }--%>
<%--            }--%>
<%--        });--%>

<%--        //监听提交--%>
<%--        form.on('submit(add)', function (data) {--%>
<%--            console.log(data);--%>
<%--            //发异步，把数据提交给php--%>
<%--            $.ajax({--%>
<%--                type: 'post',--%>
<%--                async: false,--%>
<%--                url: "${ctx}/employee/add",--%>
<%--                data: data.field,--%>
<%--                dataType: 'json',--%>
<%--                success: function (response) {--%>
<%--                    if (response) {--%>
<%--                        layer.alert("增加成功", {icon: 6}, function () {--%>
<%--                            // document.getElementById('deptForm').submit();--%>
<%--                            // 获得frame索引--%>
<%--                            let index = parent.layer.getFrameIndex(window.name);--%>
<%--                            //关闭当前frame--%>
<%--                            parent.layer.close(index);--%>
<%--                        });--%>
<%--                    } else {--%>
<%--                        layer.msg('增加失败！', {--%>
<%--                            icon: 2,--%>
<%--                            time: 1000,--%>
<%--                        })--%>
<%--                    }--%>
<%--                },--%>
<%--                error: function () {--%>
<%--                    layer.msg('增加失败！', {--%>
<%--                        icon: 2,--%>
<%--                        time: 1000,--%>
<%--                    })--%>
<%--                }--%>
<%--            });--%>
<%--            return false;--%>
<%--        });--%>


<%--    });--%>

<%--    function submitEmp() {--%>
<%--        $.ajax({--%>
<%--            type: 'post',--%>
<%--            async: false,--%>
<%--            url: "${pageContext.request.contextPath}/employee/add",--%>
<%--            data: $("#deptForm").serialize(),--%>
<%--            dataType: 'json',--%>
<%--            success: function (response) {--%>
<%--                if (response) {--%>
<%--                    layer.alert("增加成功", {icon: 6}, function () {--%>
<%--                        // document.getElementById('deptForm').submit();--%>
<%--                        // 获得frame索引--%>
<%--                        let index = parent.layer.getFrameIndex(window.name);--%>
<%--                        //关闭当前frame--%>
<%--                        parent.layer.close(index);--%>
<%--                    });--%>
<%--                } else {--%>
<%--                    layer.msg('增加失败！', {--%>
<%--                        icon: 2,--%>
<%--                        time: 1000,--%>
<%--                    })--%>
<%--                }--%>
<%--            },--%>
<%--            error: function () {--%>
<%--                layer.msg('增加失败！', {--%>
<%--                    icon: 2,--%>
<%--                    time: 1000,--%>
<%--                })--%>
<%--            }--%>
<%--        });--%>
<%--    }--%>
<%--</script>--%>

</body>

</html>